<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 3.外部样式 -->
  <link rel="stylesheet" type="text/css" href="styles.css">
  <!-- 2.嵌入样式 -->
  <style>
    p {
      color: blue;
    }
  </style>
</head>

<body>
  <!-- 
    1.内联样式，不建议使用
   -->
  <p style="color: red;">内联样式</p>
  <p>p标签</p>
</body>
<!-- 
  **内联样式（Inline Styles）：**
- **优点：** 简单、直接应用于单个元素，适合快速测试和调整样式。
- **缺点：** 不易维护和管理，样式与内容混合，不符合分离关注点的原则。

**嵌入样式（Internal Styles）：**
- **优点：** 样式规则集中管理，适用于小型项目，可以在同一文档中定义适用于多个元素的样式。
- **缺点：** 仍然可能难以维护，样式和结构依然耦合在一起。

**外部样式表（External Stylesheets）：**
- **优点：** 分离了样式和内容，可在多个HTML文件中共享样式规则，提高了可维护性和可读性，适用于大型项目和整个网站的一致性。
- **缺点：** 需要额外的HTTP请求来加载外部样式表文件，可能导致页面加载速度略微减慢，可能会引起FOUC（Flash of Unstyled Content）问题。

优先级：内联样式 > 嵌入样式 > 外部样式
 -->
</html>